import {ref} from 'vue'
import {onBeforeRouteUpdate, useRoute} from 'vue-router';
import {useCookies} from '@vueuse/integrations/useCookies'
import {router} from '@/router';

export function useTabList() {
    const route = useRoute()
    const cookie = useCookies()

    const activeTab = ref(route.path)
    const tabList = ref([
        {
            title: '后台首页',
            path: "/"
        },
    ])

    // 添加标签导航
    function addTab(tab) {
        let noTab = tabList.value.findIndex(t => t.path == tab.path) == -1
        if (noTab) {
            let noTitle = tabList.value.findIndex(t => t.title == tab.title)
            if(noTitle!=-1){
                tabList.value[noTitle].path=tab.path
            }else{
                tabList.value.push(tab)
            }
        }

        cookie.set("tabList", tabList.value)
    }

    // 初始化标签导航列表
    function initTabList() {
        let tbs = cookie.get("tabList")
        if (tbs) {
            tabList.value = tbs
        }
    }

    initTabList()

    // 监听路由变化
    onBeforeRouteUpdate((to, from) => {
        activeTab.value = to.path
        addTab({
            title: to.meta.title,
            path: to.path
        })
    })

    const changeTab = (t) => {
        activeTab.value = t
        router.push(t)
    }

    // 关闭标签 t：当前关闭的标签
    const removeTab = (t) => {
        let tabs = tabList.value
        // 1.获取当前激活的标签，判断当前关闭的标签是否与当前激活的标签相同
        let a = activeTab.value
        if (a == t) {
            // 2.如果是关闭当前激活的标签，需要变更激活状态标签
            tabs.forEach((tab, index) => {
                if (tab.path == t) {
                    // 获取下一个或者上一个标签
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                        a = nextTab.path
                    }
                }
            })
        }
        activeTab.value = a
        // 过滤关闭的标签
        tabList.value = tabList.value.filter(tab => tab.path != t)
        cookie.set("tabList", tabList.value)
    }

    const handleClose = (c) => {
        if (c === "clearAll") {
            // 切换回首页
            activeTab.value = "/"
            // 过滤只剩下首页
            tabList.value = [{
                title: '后台首页',
                path: "/"
            }]
        } else if (c === "clearOther") {
            // 过滤只剩下首页和当前激活
            tabList.value = tabList.value.filter(tab => tab.path === "/" || tab.path === activeTab.value)
        }
        cookie.set("tabList", tabList.value)
    }

    return {
        activeTab,
        tabList,
        changeTab,
        removeTab,
        handleClose
    }
}